<template>
	<div class="sidebarContent">
		<div class="sidebarmenu">
			<el-menu
				:default-active="$route.path"
				class="el-menu-vertical-demo"
				@open="handleOpen"
				@close="handleClose"
				@select="handleSelect"
				:router="true"
			>
				<template v-for="(item, key) in sidebarData">
					<template v-if="item.grade == 0">
						<el-menu-item :index="item.index" :key="key" v-if="item.disable">
							<i :class="item.iconClass"></i>
							<span slot="title">{{ item.labe }}</span>
						</el-menu-item>
					</template>
					<template v-if="item.grade == 1">
						<el-submenu :index="item.index" :key="key" v-if="item.disable">
							<template slot="title">
								<i :class="item.iconClass"></i>
								<span>{{ item.labe }}</span>
							</template>
							<el-menu-item v-for="(subitem, index) in item.children" :index="subitem.index" :key="index">
								<i :class="subitem.iconClass"></i>
								<span slot="title">{{ subitem.labe }}</span>
							</el-menu-item>
						</el-submenu>
					</template>
				</template>
			</el-menu>
		</div>
	</div>
</template>
<script>
export default {
	name: "Sidebar",
	data() {
		return {
			sidebarData: [
				// {
				// 	grade: 0,
				// 	disable: true,
				// 	index: "/index/main",
				// 	iconClass: "wj-icon-shouye",
				// 	labe: "操作台",
				// 	children: [],
				// },
				// {
				// 	grade: 0,
				// 	disable: true,
				// 	index: "/index/audit",
				// 	iconClass: "wj-icon-wenzhangguanli",
				// 	labe: "安全审计",
				// 	children: [],
				// },
				// {
				// 	grade: 0,
				// 	disable: false,
				// 	index: "/index/realtime",
				// 	iconClass: "wj-icon-gaojing",
				// 	labe: "实时告警",
				// 	children: [],
				// },
				// {
				// 	grade: 0,
				// 	disable: false,
				// 	index: "/index/terminal",
				// 	iconClass: "wj-icon-weiwangguanicon-defuben-",
				// 	labe: "终端管理",
				// 	children: [],
				// },
				// {
				// 	grade: 0,
				// 	disable: false,
				// 	index: "/index/admittance",
				// 	iconClass: "wj-icon-guanliyuanshezhi",
				// 	labe: "发布源准入",
				// 	children: [],
				// },
				// {
				// 	grade: 0,
				// 	disable: false,
				// 	index: "/index/strategy",
				// 	iconClass: "wj-icon-shujuku",
				// 	labe: "策略下发",
				// 	children: [],
				// },
				// {
				// 	grade: 0,
				// 	disable: false,
				// 	index: "/index/inside",
				// 	iconClass: "wj-icon-jiankong",
				// 	labe: "内部审计",
				// 	children: [],
				// },
				// {
				// 	grade: 0,
				// 	disable: false,
				// 	index: "/index/safety",
				// 	iconClass: "wj-icon-anquan",
				// 	labe: "安全防护",
				// 	children: [],
				// },
				// {
				// 	grade: 0,
				// 	disable: false,
				// 	index: "/index/syslog",
				// 	iconClass: "wj-icon-renwujincheng",
				// 	labe: "Syslog配置",
				// 	children: [],
				// },
				// {
				// 	grade: 1,
				// 	disable: false,
				// 	index: "/index/system",
				// 	iconClass: "wj-icon-shezhi",
				// 	labe: "系统设置",
				// 	children: [
				// 		{
				// 			index: "/index/system/system_state",
				// 			iconClass: "wj-icon-dashboard24",
				// 			labe: "系统状态",
				// 		},
				// 		{
				// 			index: "/index/system/system_network",
				// 			iconClass: "wj-icon-wangluo",
				// 			labe: "网络配置",
				// 		},
				// 		{
				// 			index: "/index/system/system_parameter",
				// 			iconClass: "wj-icon-_canshu_canshushezhi",
				// 			labe: "参数配置",
				// 		},
				// 		{
				// 			index: "/index/system/system_user",
				// 			iconClass: "wj-icon-jurassic_user",
				// 			labe: "用户管理",
				// 		},
				// 		{
				// 			index: "/index/system/system_role",
				// 			iconClass: "wj-icon-jiaoseshezhi",
				// 			labe: "角色管理",
				// 		},
				// 		{
				// 			index: "/index/system/system_control",
				// 			iconClass: "wj-icon-kongzhitai",
				// 			labe: "控制台升级",
				// 		},
				// 		{
				// 			index: "/index/system/system_firmware",
				// 			iconClass: "wj-icon-ruanjianshengji",
				// 			labe: "固件升级",
				// 		},
				// 		{
				// 			index: "/index/system/system_about",
				// 			iconClass: "wj-icon-guanyu",
				// 			labe: "关于系统",
				// 		},
				// 	],
				// },
			],
		};
	},
	created() {
		// console.log('-----------')
		// console.log(localStorage.getItem("menuArrData"))
		// console.log('-----------')

		this.sidebarData = JSON.parse(localStorage.getItem("menuArrData"));
	},
	mounted() {},
	methods: {
		// 菜单选中事件
		handleSelect(key, keyPath) {
			console.log(key, keyPath);
		},
		// 有子菜单的菜单被打开的事件
		handleOpen(key, keyPath) {
			console.log(key, keyPath);
		},
		// 有子菜单的菜单被关闭的事件
		handleClose(key, keyPath) {
			console.log(key, keyPath);
		},
	},
};
</script>
<style lang="less" scoped>
.sidebarContent {
	width: 14%;
	height: 100%;
	overflow: hidden;
	.sidebarmenu {
		width: 107%;
		height: 100%;
		overflow-x: hidden;
		overflow-y: scroll;
		/deep/ .el-menu-vertical-demo {
			width: 100%;
			height: 100%;
		}
		/deep/ .el-menu-item [class^="wj-icon-"] {
			margin-right: 18px;
			font-size: 24px;
		}
		/deep/ .el-submenu [class^="wj-icon-"] {
			margin-right: 18px;
			font-size: 24px;
		}
		/deep/ .el-menu-item * {
			font-size: 18px;
		}
		/deep/ .el-submenu__title * {
			font-size: 18px;
		}
		/deep/ .el-submenu .el-menu-item * {
			font-size: 16px;
		}

		/deep/ .el-menu-item.is-active {
			color: #70b603;
		}
	}
}
</style>
